{% load i18n static compress %}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Overpass&display=swap" rel="stylesheet">

    <!-- additional css for each side in css block -->

    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/nav.css' %}">

    {%block css %}

    {% endblock %}


    <title>SMERGE</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="{%  static 'icon/favicon.ico' %}" sizes="16x16">
    <link rel="icon" type="image/png" href="{%  static 'icon/favicon-32x32.png' %}" sizes="32x32">
    <link rel="icon" type="image/png" href="{%  static 'icon/favicon-96x96.png' %}" sizes="96x96">

</head>

<body>
    <nav>
        <a href="{% url 'home' %}" class="logo">
            SMERGE
        </a>
        <ul>
            <div class="navlinks">
                <li><a href="{% url 'howto' %}">How To Smerge</a> </li>
                <li><a href="{% url 'impressum' %}">Impressum</a> </li>
                <li><a onclick="window.history.back()">{% trans "Back" %}</a> </li>
            </div>
        </ul>
        
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>


    {% compress js %}
    <script type="module" src="{% static 'js/main.js' %}"></script>
    {% endcompress %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script type="module" src="{% static 'js/nav-slide.js' %}"></script>
    <main>
        {%block content %}

        {% endblock %}
    </main>
    <footer>
        <div class="wave-container">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:rgb(195, 158, 193);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(	7, 106, 171);stop-opacity:1" />
                </linearGradient>
                </defs>
                <path fill="url(#gradient)" fill-opacity="1" d="M0,160L40,181.3C80,203,160,245,240,234.7C320,224,400,160,480,128C560,96,640,96,720,112C800,128,880,160,960,165.3C1040,171,1120,149,1200,154.7C1280,160,1360,192,1400,208L1440,224L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
            </svg>
        </div>

        <div class="footer-text">
            <a target="_blank" rel="noopener noreferrer" href="https://github.com/manzanillo/smerge"
                title="{% trans "GitHub" %}"> <i class="tiny material-icons">explore</i>
                {%  trans  "GitHub" %}</a>

            <a href="mailto:tilman.michaeli@tum.de" title="{% trans "Contact" %}"> <i
                    class="tiny material-icons">email</i> {% trans "Contact" %}</a>
        </div>
    </footer>

    {% block messages %}
    {% if messages %}
    {% for message in messages %}
    <script>
        Materialize.toast('{{ message }}', 4000);
    </script>
    {% endfor %}
    {% endif %}
    {% endblock %}

    {%block js %}

    {% endblock %}


</body>

</html>